<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h2>title</h2>
<div class="item">
    <p>Lorem ipsum dolor sit amet.</p>
</div>
<ul>
    <li class="item1">新闻标题-1</li>
    <li class="item2">新闻标题-2</li>
    <li class="item3">新闻标题-3</li>
    <li class="item4">新闻标题-4</li>
    <li class="item5">新闻标题-5</li>
    <li class="item6">新闻标题-6</li>
    <li class="item7">新闻标题-7</li>
    <li class="item8">新闻标题-8</li>
    <li class="item9">新闻标题-9</li>
</ul>
<div id="p1">
    <div id="p1-1">
        <div id="p1-1-1">
            <div id="p1-1-1-1">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet architecto beatae delectus enim ipsum iusto laborum, libero minus perspiciatis quae quidem rem sed soluta velit veniam voluptatem voluptates voluptatibus. Repudiandae.
                </p>
            </div>
        </div>
    </div>
</div>
<script src="../vendor/jquery-1.12.4.js"></script>
<script>
    //添加事件处理:on(eventType[,selector][,data],handler)
    $('p')
        .on('click',null,null,function (e) {
            console.log('p click')
        })
        .on('click', function (e) {
            console.log('p clicked2');
                })
        .on('click', { foo: 'bar' }, function (e) {
            console.log('p clicked3 %o', e.data);})
    //采用链式语法，绑定多个函数
            // 获取传进来的数据,%o 在控制台里把对象显示出来


    $('ul').on('click', 'li.item2', function () {
                console.log('li clicked');
            });//给元素添加过滤

    $('li').on('click', function (e) {
                console.log('Clicked: %o', $(this));
            });

    $('ul').on('click', 'li', function (e) {
            console.log('Clicked: %o', $(e.target));
    })

    $('p').on('click', function (e) {
        e.stopPropagation()
        console.log('clicked p');})

    //阻止冒泡：stopPropagation()
    //阻止默认行为：preventDefault()
    //阻止：return false冒泡和默认行为

    $('p').one('click', function(e) {
        console.log('clicked p');
    });
    //一次性的事件处理 .one(enentType[,selector][,data],handler)

    $(function () {
        $('p').on('click',function () {
            console.log('clicked');
        })
        $('p').off('click');
    })
    //移除事件处理：.off(eventType[,selector][,handler])
    //阻止冒泡并阻止后续绑定的事件：stopImmediatePropagation()
    //阻止浏览器的默认事件：preventDefault()







</script>
</body>
</html>